<template>
  <div :class="['collapse-warp', collapsedState ? 'on-close ' : 'on-open ']">
    <div v-if="isTopHandler" class="handler-warp" @click="doToggle()">
      <slot name="close-handler" v-if="!collapsedState">
        <div class="panel-head">
          <div class="panel-head-tool">
            收起
            <van-icon class-prefix="ucai-icon" name="arrow_rgt" />
          </div>
        </div>
      </slot>
      <slot name="open-handler" v-else>
        <div class="panel-head">
          <div class="panel-head-tool">
            展开
            <van-icon class-prefix="ucai-icon" name="arrow_rgt" />
          </div>
        </div>
      </slot>
    </div>
    <div ref="panelWarp" class="collapse-panel">
      <slot name="panel" />
    </div>
    <div v-if="!isTopHandler" class="handler-warp" @click="doToggle()">
      <slot name="close-handler" v-if="!collapsedState">
        <div class="panel-foot text-center c-main">
          收起
          <van-icon class-prefix="ucai-icon" name="arrow_rgt" />
        </div>
      </slot>
      <slot name="open-handler" v-else>
        <div class="panel-foot text-center c-main">
          展开
          <van-icon class-prefix="ucai-icon" name="arrow_rgt" />
        </div>
      </slot>
    </div>
  </div>
</template>

<script>
  import {
    Icon,
  } from 'vant'
  export default {
    name: 'collapse-panel',
    components: {
      [Icon.name]: Icon,
    },
    props: {
      isCollapsed: {
        type: Boolean,
        default: false
      },
      isTopHandler: {
        type: Boolean,
        default: false
      },
    },

    data() {
      return {
        collapsedState: this.isCollapsed,
        openArrowClass: 'open-arrow-' + this.openArrowDirection,
        panelHeight: 0,
      }
    },

    methods: {
      doToggle() {
        const isCollapsed = this.collapsedState
        isCollapsed ? this.openPnl() : this.closePnl()
        this.collapsedState = !isCollapsed
      },

      openPnl() {
        this.$refs.panelWarp.style.height = this.panelHeight + 'px'
      },

      closePnl() {
        this.$refs.panelWarp.style.height = '0px'
      },

      setHeight() {
        this.panelHeight = this.$refs.panelWarp.offsetHeight
      }
    },

    created() {
      this.$nextTick(() => {
        this.setHeight()
        this.collapsedState && this.closePnl()
      })
    },
  }
</script>

<style lang="less" scoped>
  @import "~@style_m/basic/utils/index";

  .collapse-warp {

    .handler-warp .ucai-icon {
      display: inline-block;
      transition: .3s ease-in-out;
    }

    .collapse-panel {
      overflow: hidden;
      transition: height .3s ease-in-out;
    }

    &.on-close {
      .handler-warp .ucai-icon {
        transform: rotate(90deg);
      }
    }

    &.on-open {
      .handler-warp .ucai-icon {
        transform: rotate(-90deg);
      }
    }
  }
</style>
